<template>
     <el-col :span="2" style="margin-top: 12px;">
        <el-tooltip 
        style="width: 100%;"
        class="item" 
        effect="light" 
        :content="'当前用户：'+this.userName" 
        placement="bottom-start">
            <div class="demo-basic--circle" style="display: flex;align-items: center;">
                <div style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap; color:antiquewhite;font-size: medium;" >
                    {{ this.userName }}
                </div>
                <el-avatar style="margin-left: 25px;" size="medium" :src="circleUrl"></el-avatar>
            </div>
        </el-tooltip>
    </el-col>  
</template>
<script>
export default {
    name: 'userCenter',
    props: {
        userName: String,
    },
    data () {
        return {
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        };
    },
    mounted: function () {
        console.log('userCenter mounted', this.userName);

    },
    methods: {
        add() {
            
        },
    }
};
</script>
<style scoped>
    
</style>